<template>
	<view class="page">
			<view class="box">
				<view class="title">
				 	<view class="btn"  @click="changeWeek('last')" >上一周</view>
					<view class="dateObj" >
						{{weekDate[0].date}}至{{weekDate[6].date}}
					</view>
				 	<view class="btn" @click="changeWeek('next')" >下一周</view>
				</view>
		     </view>
		
				<view style="padding-bottom: 60rpx;">
						<view class="item" v-for="(item,index) in orderArr" :key="index">
							<view class="row"  style="" >
								<view class="label">
									上课日期:
								</view>
								<view class="val" >
									{{item.classDay}}
								</view>
							</view>
							<view class="row"  style="" >
								<view class="label">
									星期{{weekStr[item.weekday]}}
								</view>
								<view class="val" >
								</view>
							</view>
							<view class="row" >
								<view class="label">
									科目:
								</view>
								<view class="val">
									{{item.subjectName}}
								</view>
							</view>
							<view class="row">
								<view class="val">
								</view>
								<view class="btns">
									<view v-if="item.status!=1" class="listBtn" @click="submit(item)">
										申请退课
									</view>
									<view v-else class="disableBtn">
										申请退课
									</view>
								</view>
							</view>
						</view>
						<u-empty mode="list" v-if="!orderArr.length" text="暂无课程">
						</u-empty>
				</view>
	</view>
</template>

<script>
	import {getApplyForCancelMealInfoApi,findDorpCourseOrderListApi,submitDorpCourseApi,getCourseListApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				weekArr: ['一', '二', '三', '四', '五', '六', '日'],
				weekDate: [{
				        text: '一',
				        id: 1,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '二',
				        id: 2,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '三',
				        id: 3,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '四',
				        id: 4,
				        date: '',
				        day: '',
				        activeType: ""
				    },
				    {
				        text: '五',
				        id: 5,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '六',
				        id: 6,
				        date: '',
				        day: '',
				        activeType: ''
				    },
				    {
				        text: '日',
				        id: 7,
				        date: '',
				        day: '',
				        activeType: ''
		
				    },
				],
				dayText: '',
				courseStr : '',
				courseArr: [ ],
				selectDayText: '',
				list: [],
				mondayDate: '',
				sundayDate: '',
				checkboxVal:[],
				selectInfoAccount : uni.getStorageSync('selectInfoAccount'),
				isCancel: false,
				dayMonth: '',
				orderArr: [],
				weekStr:[ '0','一','二','三','四','五','六','日',]
			}
		},
		methods: {
			submit(item){
				uni.showModal({
					content:'是否申请退课',
					success:(res)=> {
						if(res.confirm){
							let data = {
							    // mealIds: this.checkboxVal.join(','),
								classDay : item.classDay,
							}
							submitDorpCourseApi(data).then(res=>{
								this.getActiveDateType().then(res=>{
										this.setMessage('申请退课成功！')
								})
							})
						}
					}
				})
			
			},
			changeWeek(type) {
			        let weekDate = this.weekDate
			        if (type == 'next') {
			            weekDate.forEach(item => {
			                item.id += 7
			            })
			        } else {
			            weekDate.forEach(item => {
			                item.id -= 7
			            })
			        }
			       this.weekDate = weekDate
			        this.handleWeek()
					this.dayText = this.weekDate[0].date
			},
			getData(day) {
			        var today = new Date()
			        var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
			        today.setTime(targetday)
			        var tYear = today.getFullYear()
			        var tMonth = today.getMonth()
			        var tDate = today.getDate()
			        tMonth = this.doHandMonth(tMonth + 1)
			        tDate = this.doHandMonth(tDate)
			        return tYear + "-" + tMonth + "-" + tDate
			},
			doHandMonth(month) {
			        var m = month
			        if (month.toString().length == 1) {
			            m = "0" + month
			        }
			        return m
			},
			checkboxChange(e){
				console.log(e);
			},
			handleWeek() {
			        let dateObj = new Date()
			        let weekNum = dateObj.getDay()
			        this.weekDate.forEach(item => {
			            item.date = this.getData(-weekNum + item.id)
			            item.day = item.date.substring(8, item.date.length)
			        })
			       
			        this.getActiveDateType()
			},
			getActiveDateType() {
			        let data = {
			            begClassDay: this.weekDate[0].date,
			            endClassDay: this.weekDate[6].date,
			        }
					return getCourseListApi(data).then(res=>{
						res.courseList.forEach(item => {
							item.classDay = item.classDay.split(' ')[0]
						   
						})
						this.orderArr = res.courseList
					})
			
			},
			selectDay(e) {
			        console.log(e);
					this.dayText = e
					this.getActiveDateType()
			},
			initWeekDate() {
		        this.handleWeek()
		        let today = new Date()
		        let dateObj = new Date(today.getTime());
		        let year = dateObj.getFullYear();
		        let month = dateObj.getMonth() + 1;
		        month = month.toString().padStart(2, '0')
		        let day = dateObj.getDate();
		        day = day.toString().padStart(2, '0')
		        let dayText = `${year}-${month}-${day}`
				let dayMonth = `${year}-${month}`
		        this.dayText = dayText
				this.dayMonth = dayMonth
		    },
			
			
		},
		components: {
		},
		onLoad({}) {
			let dateObj = new Date()
			let weekNum = dateObj.getDay()
			this.mondayDate = this.getData(-weekNum + 1)
			this.sundayDate = this.getData(-weekNum + 7)
		},
		onShow() {
			 this.initWeekDate()
		},
	}
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2;
    height: 100vh;
}

.page .colorTips {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    width: 95%;
    padding-right: 30rpx;
    padding-left: 30rpx;
    margin-bottom: 30rpx;
}
.colorTips text{
  color: #4089f0;
}

.page .colorTips .item {
    display: flex;
    margin-right: 20rpx;
}

.page .colorTips .item .icon {
    background: #4089f0;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 5rpx;
}

.page .menu {
    border-top: 2rpx solid #eaebef;
}

.page .menu .row {
    font-size: 32rpx;
    display: flex;
    border-bottom: 2rpx solid #eaebef;
}

.page .menu .row .label {
    width: 160rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20rpx;
    color: #333;
	height: 80rpx;
}

.page .menu .row .val {
    flex: 1;
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
    padding-right: 10rpx;
}

.page .menu .row .val text {
    padding: 10rpx;
}

.page .menu .row .input {
    padding: 20rpx 0;
    flex: 1;
    display: flex;
    align-items: center;
}

.page .btn {
    background-color: #2979ff;
    color: #fff;
    border-radius: 50rpx;
    font-size: 32rpx;
    width: 90%;
    margin: 30rpx auto;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    padding: 0 30rpx;
	background: #fff;
}

.box .title .btn {
    height: 50rpx;
    width: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 90rpx; */
    // border-bottom: 2rpx solid #eaebef;
}

.title .dateObj {
    color: #111111;
    font-size: 30rpx;
    flex: 1;
    display: flex;
    justify-content: center;
}

.title .icon {
    display: grid;
    place-items: center;
    width: 50rpx;
    height: 50rpx;
    background-color: #4089f0;
    border-radius: 50%;
}

.week {
    display: flex;
    color: #111;
}

.week text {
    width: 100rpx;
    height: 80rpx;
    display: grid;
    place-items: center;
    font-size: 30rpx;
}

.dayArr {
    display: flex;
    flex-wrap: wrap;
}

.dayArr .dayItem {
    width: 14.2%;
    height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
   
}

.dayArr .dayItem .active1 {
    position: relative;
    // width: 60rpx !important;
    // height: 60rpx !important;
    // background-color: #5ac725;

    // color: #fff;
}
.active1::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50% , -50%);
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	border: 2rpx solid #5ac725;
}

.dayArr .dayItem .active2 {
    border-radius: 50%;
    width: 48rpx;
    height: 48rpx;
    background-color: #4089f0;
	display: flex;
	justify-content: center;
	align-items: center;
    color: #fff;
}

.totalTitle{
	margin-left: 30rpx;
	font-size: 34rpx;
	font-weight: 600;
	color: #111;
}

.totalRow{
	margin-left: 30rpx;
}
.totalRow .val{
	font-size: 32rpx;
	line-height: 70rpx;
	margin-left: 42rpx;
}

.item{
		background-color: #fff;
		border-top: 2rpx solid #eaebef;
		margin: 20rpx 30rpx;
		border-radius: 10px;
		padding: 20rpx 25rpx;
		display: flex;
		flex-wrap: wrap;
		.row{
			font-size: 32rpx;
			display: flex;
			width: 50%;
			// border-bottom: 2rpx solid #eaebef;
			.label{
				max-width: 160rpx;
				display: flex;
				align-items: center;
				// justify-content: flex-end;
				padding-right: 15rpx;
				color: #000000d9;
				font-size: 30rpx;
				white-space: nowrap;
			}
			.val{
				flex: 1;
				padding: 15rpx 0;
				display: flex;
				align-items: center;
				text{
					padding: 20rpx;
				}
				font-size: 28rpx;
				color: #595959;
			}
			.input{
				padding: 10rpx 0;
				flex: 1;
				display: flex;
				align-items: center;
			}
			
			.btns{
				// width: 100%;
				display: flex;
				justify-content: flex-end;
				.listBtn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 55rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: #ff9900;
					font-size: 28rpx;
				}
				.disableBtn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 55rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: #ff9900;
					font-size: 28rpx;
					opacity: 0.5;
				}
			}
		}
	}

</style>
